import Taro from "@tarojs/taro";
import { View, Text, Image,ScrollView } from "@tarojs/components";
import "./index.scss";
import {
  AtModal,
  AtModalHeader,
  AtModalContent,
  AtModalAction,
  AtIcon,

} from "taro-ui";
import { useState,useMemo,useCallback } from "react";
interface Task {
  name: string;
  points: number;
  status?: "completed" | "pending";
  image?: any;
}

interface MemberData {
  id: string;
  phone: string;
  tasks: Task[];
}

interface GetMorePointsModalProps {
  isVisible: boolean;
  onClose: () => void;
  customStyle?: any;
}

export default function GetMorePointsModal(props): JSX.Element {
  const [selectedTab, setSelectedTab] = useState("138****8000");
  const [memberData, setMemberData] = useState<MemberData[]>(() => [
    {
      id: "1",
      phone: "138****8000",
      tasks: [
        {
          name: "注册民生银行信用卡",
          points: 5000,
          image: "https://wanhuhealth.oss-cn-beijing.aliyuncs.com/static/mini-jifen/images/task/creditcard.jpg",
        },
        {
          name: "少儿重疾保险计划",
          points: 3000,
          image: "https://wanhuhealth.oss-cn-beijing.aliyuncs.com/static/mini-jifen/images/task/kidInsurance.jpg",
        },
        {
          name: "邀请好友",
          points: 1000,
          image: "https://wanhuhealth.oss-cn-beijing.aliyuncs.com/static/mini-jifen/images/task/sign.jpg",
        },
      ],
    },
    {
      id: "2",
      phone: "139****9000",
      tasks: [
        {
          name: "少儿重疾保险计划",
          points: 3000,
          image: "https://wanhuhealth.oss-cn-beijing.aliyuncs.com/static/mini-jifen/images/task/kidInsurance.jpg",
        },
        {
          name: "邀请好友",
          points: 1000,
          image: "https://wanhuhealth.oss-cn-beijing.aliyuncs.com/static/mini-jifen/images/task/sign.jpg",
        },
      ],
    },
    {
      id: "3",
      phone: "133****7323",
      tasks: [
        {
          name: "每日签到",
          points: 120,
          status: "completed",
          image: "https://wanhuhealth.oss-cn-beijing.aliyuncs.com/static/mini-jifen/images/task/sign.jpg",
        },
        {
          name: "少儿重疾保险计划",
          points: 3000,
          image: "https://wanhuhealth.oss-cn-beijing.aliyuncs.com/static/mini-jifen/images/task/kidInsurance.jpg",
        },
        {
          name: "邀请好友",
          points: 1000,
          image: "https://wanhuhealth.oss-cn-beijing.aliyuncs.com/static/mini-jifen/images/task/sign.jpg",
        },
      ],
    },
  ]);
  const currentMember = useMemo(() => memberData.find(member => member.phone === selectedTab), [selectedTab, memberData]);

  const handleTaskPress = useCallback((taskIndex: number) => {
    setMemberData(prevMemberData => {
        return prevMemberData.map(member => {
            if (member.phone === selectedTab) {
                const updatedTasks = member.tasks.map((task, index) => {
                    if (index === taskIndex) {
                        return { ...task, status: 'completed' as 'completed' };
                    }
                    return task;
                });
                return { ...member, tasks: updatedTasks };
            }
            return member;
        });
    });
}, [selectedTab, setMemberData]);

  return (
    <AtModal isOpened={props.isVisible} onClose={props.onClose} className='get-more-points-modal'>
      <AtModalHeader>
        <View className="header">
          <Text className="title">获取更多积分</Text>
          <AtIcon
            value="close-circle"
            size="12"
            color="#b1b1b1"
            onClick={props.onClose}
          ></AtIcon>
        </View>
      </AtModalHeader>
      <AtModalContent>
        <View className="content">
          
          <Text className='tip'>为每位家庭成员精选以下快速获取积分的任务，完成即可获得相应积分奖励</Text>
          
          <ScrollView scrollX className='scroll-tab'>
            <View className='tab'>
              {
                memberData.map(member=>{
                  return (
                    <View className={['member',selectedTab === member.phone ? 'selected' : ''].join(' ')} onClick={()=>{setSelectedTab(member.phone)}}>{member.phone}</View>
                  )
                })
              }
              </View>
          </ScrollView>
          
          <View className='task-list'>
            <ScrollView scrollY className='task-list-scroll'>
              {
                currentMember && currentMember.tasks.map((task,taskIndex)=>{
                  return (
                    <View className="task">
                      <View className="task-content">
                        <View className='task-info'>
                          <Text className="task-name">{task.name}</Text>
                          <Text className="task-num">+{task.points}</Text>
                        </View>
                        <View onClick={()=>{ handleTaskPress(taskIndex)}} className={['task-btn',task.status === 'completed' ? 'completed':'pending'].join(' ')}>
                            {task.status === 'completed' ? '任务完成' : '去完成'}
                        </View>
                        
                      </View>
                      <View className="task-image-container">
                        <Image className="task-image" src={task.image} mode='aspectFill'/>
                      </View>
                      
                      
                    </View>
                  )
                })
              }
            </ScrollView>
          </View>
          
        </View>
      </AtModalContent>
      <AtModalAction>
        <View className="action">确定</View>
      </AtModalAction>
    </AtModal>
  );
}
